<link rel="stylesheet" type="text/css" href="<?php echo $this->baseUrl(); ?>/js/jquery/treeview/jquery.treeview.css" media="screen, projection" />
<script type="text/javascript" src="<?php echo $this->baseUrl(); ?>/js/jquery/jquery.cookie.js"></script>
<script type="text/javascript" src="<?php echo $this->baseUrl(); ?>/js/jquery/treeview/jquery.treeview.js"></script>
<script type="text/javascript" src="<?php echo $this->baseUrl(); ?>/js/jquery/treeview/jquery.treeview.async.js"></script>

<link rel="stylesheet" type="text/css" href="<?php echo $this->baseUrl(); ?>/js/jquery/jorgchart/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseUrl(); ?>/js/jquery/jorgchart/css/jquery.jOrgChart.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseUrl(); ?>/js/jquery/jorgchart/css/custom.css" />
<link rel="stylesheet" type="text/css" href="<?php echo $this->baseUrl(); ?>/js/jquery/jorgchart/css/prettify.css" />
<script type="text/javascript" src="<?php echo $this->baseUrl(); ?>/js/jquery/jorgchart/prettify.js"></script>
<script type="text/javascript" src="<?php echo $this->baseUrl(); ?>/js/jquery/jorgchart/jquery.jOrgChart.js"></script>
<<style>
<!--
#content {
    width: 5500px;
}

.jOrgChart .node {
    font-size: 11px;
    white-space: nowrap;
}
-->
</style>

<a href="<?php echo $this->baseUrl(); ?>/corporativo/papel/formulario">Novo Papel</a><br />
<hr />
<!-- tree view -->
<div class="pse2-tree-left">
<?php /*
    <div id="sidetreecontrol">
        <a class="tree-fecha" href="?#">Fechar Todos</a> |
        <a class="tree-abre" href="?#">Abrir Todos</a>
    </div>
    <br />
*/ ?>
    <div class="ev-tree-view">
        <ul id="org" style="display:none">
        <?php echo $this->treeViewOrganograma($this->treeView, $this->baseUrl() . '/corporativo/papel/formulario', 'id_papel', 'st_codigo', 'st_nome', $this->aUsuarios); ?>
        </ul>
    </div>
    <div id="chart" class="orgChart"></div>
</div>
<!-- fim de tree view -->

<script type="text/javascript">
    $(function() {
        $("#org").jOrgChart({
            chartElement : '#chart',
            dragAndDrop  : false
        });

        /* Custom jQuery for the example */
        $("#show-list").click(function(e){
            e.preventDefault();

            $('#list-html').toggle('fast', function(){
                if($(this).is(':visible')){
                    $('#show-list').text('Hide underlying list.');
                    $(".topbar").fadeTo('fast',0.9);
                }else{
                    $('#show-list').text('Show underlying list.');
                    $(".topbar").fadeTo('fast',1);
                }
            });
        });

        $('#list-html').text($('#org').html());

        $("#org").bind("DOMSubtreeModified", function() {
            $('#list-html').text('');

            $('#list-html').text($('#org').html());

            prettyPrint();
        });
        prettyPrint();



        /*
        $(".ev-tree-view").treeview({
            animated  : "medium",
            persist   : "location",
            collapsed: false,
            control   : "#sidetreecontrol",
            unique    : true,
            toggle: function() {
                console.log(this + " has been toggled");
               }
        });
        */
    })
</script>